import React, {useEffect, useState} from "react";
import {Form, Input, Button} from "antd";
import {ProductDataState, Dispatch, connect, ConnectProps, history} from 'umi';
import styles from "./index.less";
import FormFormInModal from './FormFormInModal';
import {ProductInfoType} from "../CollapseAccordion/data";
import {useDispatch} from "@@/plugin-dva/exports";
import {ChannelContext} from '../TabsBasic/channel-context'

interface PageProps extends ConnectProps {
  productInfo: ProductInfoType;
  productListLoading: boolean;
  dispatch: Dispatch;
  distributor: string,
  code: number;
}

const RegistrationForm: React.FC<PageProps> = (props) => {
  const [form] = Form.useForm();

  const {productInfo, distributor, code} = props;
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch({
      type: 'productWorkplace/getProductInfo',
      params: {
        code,
        distributor: 2000,
      },
    });
  }, []);

  const [orderInfo, setOrderInfo] = useState({productCode: code});
  console.log('订单信息', orderInfo);

  if (!productInfo) {
    return null;
  }

  function handleToProductList() {
    history.push('/product/productpage')
  }

  return (
    <Form
      form={form}
      name="register"
      initialValues={{
        residence: ["zhejiang", "hangzhou", "xihu"],
        prefix: "86",
      }}
      scrollToFirstError
    >
      <Form.Item
        name="商品名称"
        label="商品名称"
      >
        <span>{productInfo.name}</span>
      </Form.Item>

      <Form.Item
        name="商品状态"
        label="商品状态"

      >
        <span>{productInfo.state ? '在售' : '停售'}</span>
      </Form.Item>

      <Form.Item
        name="链接"
        label="链接"
        rules={[
          {
            required: true,
            message: "Please confirm your password!",
          },
        ]}
      >
        <Input onChange={(event) => {
          setOrderInfo({
            ...orderInfo,
            orderUrl: event.target.value
          })
        }
        }/>
      </Form.Item>

      <Form.Item
        name="下单数量"
        label="下单数量"
      >
        <Input onChange={(event) => {
          const num = event.target.value;
          setOrderInfo({
            ...orderInfo,
            num,
            totalPrice: num > 0 ? productInfo.salePrice * num : 0
          })
        }
        }/>
      </Form.Item>

      <Form.Item
        name="下单范围"
        label="下单范围"
      >
        <span>{productInfo.minnumOrder}-{productInfo.maxnumOrder}（必须按照这个数量范围下单且下单倍数为：{productInfo.orderMultiple}，否则无法提交订单)</span>
      </Form.Item>

      <Form.Item
        name="商品单价"
        label="商品单价"
      >
        <span>💲{productInfo.salePrice}</span>
      </Form.Item>

      <Form.Item
        name="商品总价"
        label="商品总价"
      >
        <span>💲{orderInfo.totalPrice}</span>
      </Form.Item>

      <Form.Item
        name="温馨提示"
        label="温馨提示"
      >
        <span>下单输入的数量为需求数量，例如：需要100粉丝那么下单数量就填写100，具体看商品名称是否标注面值没有标注则下单数量是多少就处理多少。
       </span>

      </Form.Item>

      <Form.Item
        name="商品说明"
        label="商品说明"
      >
        <Input.TextArea defaultValue={productInfo.description} autoSize disabled={true}/>
      </Form.Item>

      <Form.Item
        label="操作"
      >
        <FormFormInModal orderInfo={orderInfo}/>
        <Button onClick={handleToProductList}>
          返回列表
        </Button>
      </Form.Item>
    </Form>
  );
};

class BuyForm extends React.Component<PageProps> {
  componentDidMount() {
  }

  render() {
    return (
      <div className={styles.container}>
        <div id="components-form-demo-register">
          <RegistrationForm productInfo={this.props.productInfo} code={this.props.match.params.code}
                            distributor={this.context}/>
        </div>
      </div>
    );
  }
}

BuyForm.contextType = ChannelContext;

export default connect(
  ({
     productWorkplace: {productInfo},
     loading
   }: {
    productWorkplace: ProductDataState;
    loading: {
      effects: {
        [key: string]: boolean;
      };
    };
  }) => (
    {
      productInfo,
      basicInfoLoading: loading.effects['productWorkplace/getProductInfo'],
    }
  ))(BuyForm);
